$(function () {
  // 渲染下拉菜单里的文章分类
  initArtName()
  let layer = layui.layer
  let form = layui.form
  function initArtName() {
    axios({
      method: 'GET',
      url: '/my/article/cates'
    }).then(function (res) {
      // console.log(res);
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)
      }

      let arr = [`<option value="">请选择文章类别</option>`]
      //遍历
      res.data.data.forEach(element => {
        arr.push(`
                <option value="${element.Id}">${element.name}</option>
            `)
      })
      //接收拼接后的字符串
      let str = arr.join('')
      // console.log(str);
      //成功后渲染
      $('[name=cate_id]').empty().html(str)
      // 动态创建的表单需要渲染时使用 form.render(type,filter())更新表单
      // 默认更新全部 也可以在type选择更新的部分
      form.render()
    })
  }

  //初始化富文本编辑器
  initEditor()

  //选择封面 图片
  // 初始化图片裁剪器
  var $image = $('#image')
  // 裁剪选项
  var options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
  }
  // 初始化裁剪区域
  $image.cropper(options)




  //文章状态的校验 
  // 点击按钮 构建状态 :已发布 或 草稿
  let state = ''
  $('#republic').on('click', function () {
    state = '已发布'
  })
  $('#draft').on('click', function () {
    state = '草稿'
  })

  //文章发布表单提交
  $('#formPub').on('submit', function (ev) {
    ev.preventDefault()
    //需要的参数是FormData类型的
    //先生成FormData对象
    let fd = new FormData(this)
    //为fd添加状态字段 :state
    // 判断文章的发布状态
    fd.append('state', state)

    //获取cropper预览区域的文件对象
    //添加文章封面 生成图片是异步操作
    //所以结果是函数里操作
    //ajax也要写到回调函数里
    $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
      width: 400,
      height: 280
    }).toBlob(function (blob) {       // 将 Canvas 画布上的内容，转化为文件对象
      //得到文件对象后续的操作
      fd.append('cover_img', blob)
      // console.log(...fd);
      // 文件上传
      axios({
        method: 'POST',
        url: '/my/article/add',
        data: fd
      }).then(function (res) {
        if (res.data.status !== 0) {
          return layer.msg(res.data.message)
        }
        layer.msg('发布文章成功！')
        // location.href = '/article/art_list.html'
        //跳转
        setTimeout(() => {
          window.parent.document.querySelector('#theList').click()
        }, 1500);
      })
      // jQuery

    })

  })

  // 选择文章封面按钮
  $('#chooseImgBtn').on('click', function () {
    $('#chooseImgInp').click()
  })

  // 把选择的封面渲染到裁剪区
  $('#chooseImgInp').on('change', function (e) {
    //获取 文件对象
    let file = e.target.files[0]
    //判断
    if (file === undefined) {
      return layer.msg('未选择文件！')
    }
    // 更换图片
    let newImgURL = URL.createObjectURL(file)
    //销毁旧区域 重新获取路径 然后重新初始化裁剪区域
    $image.cropper('destroy')
      .attr('src', newImgURL)
      .cropper(options)
  })
})
